﻿@model Core.Models.Comment
@{
    ViewBag.Title = "Details";
    Layout = "";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<style>
    .inline
    {
        display: inline;
        width: 100%;
    }
    .inline div.editor-label
    {
        margin: 3px 0 0 !important;
    }
    .inline div.editor-field
    {
        margin: 3px 0 0 !important;
    }
    .width_100px
    {
        width: 100px;
        float: left;
    }
    div.inline input[type=text]
    {
        width: 280px;
    }
    div.inline textarea
    {
        width: 280px;
    }   
    h4
    {
        width: 80%;
        padding: 5px;
        border-bottom: #9b9993 1px solid;
    }
</style>
<h4>
    Ý kiến của bạn</h4>
@using (Html.BeginForm("Create", "Comment", FormMethod.Post, new { id = "myForm", @class = "form-horizontal", @role = "form" }))
{
    @Html.ValidationSummary(true)    
    @Html.HiddenFor(model => model.PostId)

    <div class="form-group">
        <div class="col-sm-2 control-label">
            @Html.LabelFor(model => model.FirstName)</div>
        <div class="col-sm-3">
            @Html.ValidationMessageFor(model => model.FirstName)
            @Html.TextBoxFor(model => model.FirstName, new { @class = "form-control" })
        </div>
    </div>
    
    <div class="form-group">
        <div class="col-sm-2 control-label">
            @Html.LabelFor(model => model.LastName)</div>
        <div class="col-sm-3">
            @Html.ValidationMessageFor(model => model.LastName)
            @Html.TextBoxFor(model => model.LastName, new { @class = "form-control" })
        </div>
    </div>
    
    <div class="form-group">
        <div class="col-sm-2 control-label">
            @Html.LabelFor(model => model.Email)</div>
        <div class="col-sm-3">
            @Html.ValidationMessageFor(model => model.Email)
            @Html.TextBoxFor(model => model.Email, new { @class = "form-control" })
        </div>
    </div>
    
    <div class="form-group">
        <div class="col-sm-2 control-label">
            @Html.LabelFor(model => model.Content)</div>
        <div class="col-sm-5">
            @Html.ValidationMessageFor(model => model.Content)
            @Html.TextAreaFor(model => model.Content, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">
        </div>
        <div class="col-sm-3">
            @*<input type="submit" value="Gửi" />*@
            <input class="btn btn-success" type="submit" id="SendComment" value="Gửi" />
            <script>
                $(function () {
                    $('#SendComment').click(function (evt) {
                        var isValidFirstName = false;
                        isValidFirstName = $('#myForm').validate().element($('#FirstName'));

                        var isValidLastName = false;
                        isValidLastName = $('#myForm').validate().element($('#LastName'));

                        var isValidEmail = false;
                        isValidEmail = $('#myForm').validate().element($('#Email'));

                        var isValidContent = false;
                        isValidContent = $('#myForm').validate().element($('#Content'));

                        var val = $('#myForm').validate();
                        val.showErrors();

                        if (isValidFirstName && isValidLastName && isValidEmail && isValidContent) {
                            $.ajax({
                                type: "POST", //Phương thức gửi request là POST hoặc GET
                                //data: "postId=" + $('#PostId').val() + "&firstName=" + $('#FirstName').val() + "&lastName=" + $('#LastName').val() + "&email=" + $('#Email').val() + "&content=" + $('#Content').val(), //tham số gửi kèm
                                data: $('#myForm').serialize(),
                                dataType: 'html', //kiểu dữ liệu trả về, mặc định là text
                                async: false, // NEW
                                url: "/Comment/Create", //Đường dẫn tới nơi xử lý request ajax
                                beforeSend: function () {
                                    console.log("I'm sending AJAX.");
                                },
                                success: function (data) {
                                    console.log('response: ' + data);
                                },
                                error: function (er) {
                                    console.log(er.responseText);
                                },
                                complete: function (data) {
                                    console.log("I'm done.");
                                    $('#new_comment').empty().html(data.responseText);
                                    //reload view comments
                                    $.ajax({
                                        type: "POST", //Phương thức gửi request là POST hoặc GET
                                        data: "postId=" + $('#PostId').val() + "&isAuthorized=" + false, //tham số gửi kèm                                        
                                        dataType: 'html', //kiểu dữ liệu trả về, mặc định là text
                                        async: false, // NEW
                                        url: "/Comment/ViewComments", //Đường dẫn tới nơi xử lý request ajax                                        
                                        complete: function (data) {
                                            console.log("I'm done.");
                                            $('#comment_entries').empty().html(data.responseText);
                                        }
                                    });
                                    return false;
                                }
                            });
                            return false;
                        }
                        evt.preventDefault();
                        return false;
                    });
                });
            </script>
        </div>
    </div>
}